<template>
    <div class="header">
        <div class="icon">
            <i class="el-icon-user"></i>
        </div>
        <div class="name">
            管理员系统
        </div>
        <div class="header-admin">
            <el-dropdown class="roleName" trigger="click" @command="command">
                <span class="span-link">
                    更多操作
                    <i class="el-icon-caret-bottom"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="adminCenter">个人中心</el-dropdown-item>
                    <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>

</template>
<script>
import bus from '@/utils/bus'

export default {
    data() {
        return {
            name:'未知'
        };
    },

    methods: {
        command(command){
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
                localStorage.removeItem('ms_userId');
                this.$router.push('/loginAdmin');
            }
            if (command == 'adminCenter') {
                this.$router.push('/allPerson')
            }
        }
    }
}

</script>
<style scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 70px;
    font-size: 22px;
    color: #fff;
    background-color: #9eb82a;
}
.icon {
    float: left;
    padding: 0 21px;
    background-color: #9eb82a;
    /* cursor: pointer; */
    line-height: 70px;
}
.name {
    position: relative;
    float: left;
    left: 39%;
    width: 250px;
    line-height: 70px;
}
.roleName {
    margin-left: 10px;
}
.header-admin {
    float: right;
    padding-right: 50px;
    display: flex;
    height: 70px;
    align-items: center;
}
.span-link{
    color: #fff;
    cursor: pointer;
}
</style>
